<HTML>

<HEAD>
<TITLE>HTML Samples</TITLE>
<link rel="stylesheet" type="text/css" href="demo.css">
<STYLE TYPE="text/css"> <!--
  -->
</STYLE>

</HEAD>

<BODY class="indent">
<p CLASS="heading"><A NAME="Highlighting">Character Highlighting</A></p>
<UL>
<LI><B>Bold Text</B><BR>
</LI>
<LI><I>Italicized Text</I><BR>
</LI>
<LI><U>Underlined Text</U><BR>
</LI>
<LI><EM>Emphasized Text</EM><BR>
</LI>
<LI><STRONG>Strong Text</STRONG><BR>
</LI>
<LI><CODE>Code Text</CODE><BR>
</LI>
<LI><CITE>Citation Text</CITE><BR>
</LI>
<LI><KBD>Keyboard Text</KBD><BR>
</LI>
<LI><SAMP>Sample Text</SAMP><BR>
</LI>
<LI><TT>Teletype Text</TT><BR>
</LI>
<LI><VAR>Variable Element Text</VAR><BR>
</LI>
<LI><B><I>Bold and Italicized Text</I></B><BR>
</LI>
<LI><STRIKE>Struck Out Text</STRIKE><BR>
</LI>
</UL>

<p CLASS="heading"><A NAME="Headings">Headings</A></p>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>

<p CLASS="heading"><A NAME="Fonts">Fonts</A></p>
<P>Font control (Face names, color, size) may be achieved by setting VCL properties or through the use of tags in
the HTML document. </P>

<UL>
<LI><B>Font Faces</B> <UL>
<LI><FONT FACE="Times New Roman">Times New Roman</FONT> </LI>
<LI><FONT FACE="Arial">Arial</FONT> </LI>
<LI><FONT SIZE="5" FACE="WingDings">&ntilde;&#184;(6</FONT> (WingDings) </LI>
</UL>
</LI>
<LI><B>Font Sizes</B> <FONT SIZE="1">1</FONT> <FONT SIZE="2">2</FONT> <FONT SIZE="3">3</FONT> <FONT
SIZE="4">4</FONT> <FONT SIZE="5">5</FONT> <FONT SIZE="6">6</FONT> <FONT SIZE="7">7</FONT> <FONT SIZE="6">6</FONT>
<FONT SIZE="5">5</FONT> <FONT SIZE="4">4</FONT> <FONT SIZE="3">3</FONT> <FONT SIZE="2">2</FONT> <FONT
SIZE="1">1</FONT> </LI>
<LI><B><FONT COLOR="#800000">F</FONT><FONT COLOR="#FFFFFF">O</FONT><FONT COLOR="#000080">N</FONT><FONT
COLOR="#008000">T</FONT> <FONT COLOR="#00FFFF">C</FONT><FONT COLOR="#FF0000">O</FONT><FONT
COLOR="#000080">L</FONT><FONT COLOR="#800080">O</FONT><FONT COLOR="#FFFF00">R</FONT><FONT COLOR="#0000FF">S</FONT>
</B><P> </P>
</LI>
<LI><B>Subscripts and Superscripts</B> <UL>
<LI>H<SUB>2</SUB>SO<SUB>4</SUB> </LI>
<LI>R<SUP>2</SUP> = X<SUP>2</SUP> + Y<SUP>2</SUP> </LI>
</UL>
</LI>
</UL>

<p CLASS="heading"><A NAME="Lists" CLASS="heading">Lists</A></p>
<P><B>Ordered List</B><BR>
</P>
<OL>
<LI>Line 1 </LI>
<LI>Line 2 </LI>
</OL>
<P><B>Ordered List (Lettered)</B><BR>
</P>
<OL TYPE="a">
<LI>Line 1 </LI>
<LI>Line 2 </LI>
</OL>
<P><B>Unordered List</B><BR>
</P>
<UL>
<LI>Line 1 </LI>
<LI>Line 2 </LI>
</UL>
<P><B>Definition List</B><BR>
</P>
<DL>
<DT>Term 1</DT>
<DD>Term 1's definition </DD>
<DT>Term 2</DT>
<DD>Term 2's definition </DD>
</DL>
<P><B>Directory List</B> (looks just like unordered list) </P>
<DIR>
<LI>Item 1 </LI>
<LI>Item 2 </LI>
</DIR>
<P><B>Menu List</B> (looks just like unordered list) <MENU>
<LI>Item 1 </LI>
<LI>Item 2 </LI>
</MENU>
</P>
<P><B>Lists can be nested in various ways</B> </P>
<OL>
<LI>First Item <UL>
<LI>First Sub Item <UL>
<LI>First Sub Sub Item </LI>
<LI>Second Sub Sub Item </LI>
</UL>
</LI>
<LI>Second Sub Item </LI>
</UL>
</LI>
<LI>Second Item </LI>
</OL>

<p CLASS="heading"><A NAME="Images">HTML Graphics</A></p>
<P><B>Inline</B> images are placed directly in text like this one.
<IMG SRC="glass.bmp" ALT="glass.bmp" WIDTH="48" HEIGHT="54"> Inline Images may be aligned so that text is at the
bottom (default), at the top, <IMG SRC="glass.bmp" ALIGN="TOP" WIDTH="48" HEIGHT="54"> or in the middle.
<IMG SRC="glass.bmp" ALIGN="MIDDLE" WIDTH="48" HEIGHT="54">. The image error symbol <IMG SRC="foo.bmp"> is
displayed if an error is encountered when displaying an image. </P>
<P> Images can be used as hotspots <A HREF="#HighLighting"><IMG SRC="contents.bmp" ALT="Contents" WIDTH="106"
HEIGHT="41"></A> and work just like text links. </P>
<P> <A NAME="Up"><B>Transparent</B></A> images like these <IMG SRC="glass.bmp" Alt="glass.bmp" WIDTH="48" HEIGHT="54"><!--transp-->
<IMG SRC="note.gif" Alt="note.gif" WIDTH="32" HEIGHT="32"> allow the background to show through. </P>
<P> <A NAME="FloatImage"> <IMG SRC="pengbrew.png" ALT="pengbrew.png" ALIGN="left" HEIGHT="160" WIDTH="160"></A>
<A HREF="#No Connection"><IMG SRC="pyramids.jpg" ALT="Pyramids" ALIGN="right" ISMAP="ISMAP" WIDTH="138"
HEIGHT="109"></A> Left and right <B>floating</B> images, shown here, are appropriate for large images as text can
flow around them automatically. </P>
<P> The image on the right has the <A NAME="IsMap"><B>IsMap</B></A> attribute set. When used as a link, the pixel
coordinates of the click spot are transmitted with the URL. These can be used to direct the link to a target
appropriate for that area of the image. </P>
<P><A NAME="UseMap"> <IMG ALIGN="right" SRC="arrows.gif" USEMAP="ArrowMap" WIDTH="84" HEIGHT="46"
ALT="arrows.gif"> </A>The image with the arrows demonstrates client side image mapping. The <B>UseMap</B>
attribute points to an image map definition describing the hot areas of the image. <BR CLEAR="all">
<MAP NAME="ArrowMap">
<AREA Title="Up" SHAPE="Polygon" HREF="#Images" COORDS="6,40,21,3,36,39,21,36">
<AREA Title="Down" SHAPE="Polygon" HREF="#Special Chars" COORDS="47,5,62,7,78,5,62,41">
</MAP>
</P>
<P> <A NAME="Sizing"> <IMG SRC="pyramids.jpg" ALT="Pyramids" ALIGN="left" WIDTH="69" HEIGHT="55"></A>
<IMG SRC="pyramids.jpg" ALT="Pyramids" ALIGN="left" WIDTH="35" HEIGHT="27"> Images may be sized using the
<B>height</B> and <B>width</B> attributes. <BR CLEAR="all">
</P>

<p CLASS="heading"><A NAME="MouseOver">MouseOver Images</A></p>
<p>A <A HREF="Things.htm#ActiveImages" Target="RightWin">special syntax</a> allows for two and three state MouseOver images.</p>
           <p align="center"><img Src="ugly.gif" Active>
           <p align="center"><img Src="mail5a.gif" Active>

<p CLASS="heading"><A NAME="Special Chars">Special Characters</A></p>
<P>In an HTML document, some characters must be specially entered. </P>
<P></P>
<UL>
<LI>The characters &lt;, &gt;, &amp;, and &quot; have special significance in the HTML language. They can be
entered as <B>&amp;lt;</B>, <B>&amp;gt;</B>, <B>&amp;amp;</B>, and <B>&amp;quot;</B> respectively. (Note the
semicolon in the syntax).<P>  </P>
</LI>
<LI>Non keyboard characters may be entered in the form <B>&amp;#NNN;</B> where NNN is the decimal number
representing the character. For instance, the <B>&copy;</B> copyright symbol may be entered as <B>&amp;#169;</B>
(<B>&amp;copy;</B> also works). <P> </P>
</LI>
<LI>Some characters in the Latin entity set also have special symbols by which they may be entered. For example, A
with a grave accent, <B>&Agrave;</B>, is entered as <B>&amp;Agrave;</B>. </LI>
</UL>

<div style="page-break-inside: avoid;">
<p CLASS="heading"><A NAME="Address1">Address Text</A></p>
<ADDRESS> L. David Baldwin<BR>
22 Fox Den Road<BR>
Hollis, NH 03049<BR>
</ADDRESS>
</div>

<p CLASS="heading"><A NAME="Preformated">Preformated Text</A></p>
<PRE>This is preformated text, <B>&lt;pre&gt;</B>.  Multiple spaces    and
carriage returns are recognized.  Preformated text won't
wrap.  It can have <A HREF="#Preformated">hot spots too.</A>
</PRE>

<p CLASS="heading"><A NAME="BlockQuote">Blockquote Text</A></p>
<BLOCKQUOTE> This is blockquote text. It is used to indicate text quoted from another source. Here it is rendered
as indented plain text. </BLOCKQUOTE>

<p CLASS="heading"><A NAME="Centered">Centered Text</A></p>
<p align="CENTER">
Here is a line of centered text.
</p>

<p class="heading"><a name="SpecialEvents">Special Events</a></p>
<p>Events allow interaction with the user's application.
<ul>
  <li>OnInclude event allows HTML text insertion at load time.
      <p align="center"><b>Today's date is <!--#date--></b>
      <br><b>Loaded at <!--#time--></b>
  <li><p>OnImageClick, OnImageOver events for images.
      <p align="center"><b>Right Click on these Thumbnails</b>
      <p align="center"><img src="arizona.jpg" height="75">&nbsp;&nbsp;
         <img src="pyramids.jpg" height="75">&nbsp;&nbsp;
         <img src="windmill.jpg" transp height="75">&nbsp;&nbsp;
  <li><p>OnObjectClick event for Buttons, Radiobutton, and Checkboxes
      <p align="center"><b>Click on these</b>

      <table align="center" cellpadding="5">
      <tr valign="bottom">
          <td width="50%" nowrap>
              <input type="radio" name="Series1" value="Radio 1" OnClick="display" checked>&nbsp;Radio 1<br>
              <input type="radio" name="Series1" value="Radio 2" OnClick="display">&nbsp;Radio 2
          <td nowrap><input type="checkbox" name="Series2" value="Checkbox 1" OnClick="display">&nbsp;Checkbox 1<br>
              <input type="checkbox" name="Series2" value="Checkbox 2" OnClick="display">&nbsp;Checkbox 2
      </table>
      <p align="center"><input type="button" value="Push Me" OnClick="Thank You!">
</ul>

<p CLASS="heading"><A NAME="Tables">Tables</A></p>
<CENTER>
<TABLE BORDER="1" CELLPADDING="5">
  <TR>
	 <TH BGCOLOR="#FFD0D0">Weight</TH>
	 <TH BGCOLOR="#FFD0D0">Fee</TH>
  </TR>
  <TR>
	 <TD BGCOLOR="#FFFFE0">Not over 10 pounds</TD>
	 <TD BGCOLOR="#FFFFE0">$1.80</TD>
  </TR>
  <TR>
	 <TD BGCOLOR="#FFFFE0">Over 10 pounds</TD>
	 <TD BGCOLOR="#FFFFE0">$2.50</TD>
  </TR>
</TABLE>
</CENTER>
<P> Many other variations of Tables are shown in the <A HREF="tabltut1.htm" TARGET="RightWin"> Table Tutorial.</A>
</P>

<div style="page-break-inside: avoid;">
<p CLASS="heading"><A NAME="Forms">HTML Forms</A></p>
<FORM ACTION="Dummy.htm" METHOD="Get">
<TABLE BORDER="1" ALIGN="center">
   <!--This table for outside border only-->
  <TR>
	 <TD BGCOLOR="#d0d0d0">
            <TABLE ALIGN="center" border=0 width=360>
		<TR>
		  <TH COLSPAN="4">Pizza Order</TH>
		</TR>
		<TR>
		  <TH ALIGN="right" WIDTH="33%">Name:</TH>
		  <TD WIDTH="67%" COLSPAN="3"><INPUT SIZE="27" NAME="Name"></TD>
		</TR>
		<TR>
		  <TH ALIGN="right">Address:</TH>
		  <TD COLSPAN="3"><INPUT SIZE="27" NAME="Address"></TD>
		</TR>
		<TR VALIGN="top" BGCOLOR="#d0d0d0">
		  <TD NoWrap><B>Topping</B><BR>
		  &#160;<INPUT TYPE="checkbox" NAME="Topping" VALUE="Cheese" CHECKED="CHECKED"> Cheese<BR>
		  &#160;<INPUT TYPE="checkbox" NAME="Topping" VALUE="Pepperoni"> Pepperoni<BR>
		  &#160;<INPUT TYPE="checkbox" NAME="Topping" VALUE="Onion"> Onion<BR>
		  </TD>
		  <TD COLSPAN="2"><B>Size</B><BR>
		  &#160;<INPUT TYPE="radio" NAME="Size" VALUE="10in"> 10 in<BR>
		  &#160;<INPUT TYPE="radio" NAME="Size" VALUE="12in" CHECKED="CHECKED"> 12 in<BR>
		  &#160;<INPUT TYPE="radio" NAME="Size" VALUE="16in"> 16 in<BR>
		  </TD>
		  <TD WIDTH="40%"><B>Payment Method</B> <BR>
		  &#160; <SELECT NAME="PaymentMethod" SIZE="1"> <OPTION SELECTED="SELECTED">Cash </OPTION><OPTION>Visa
		  </OPTION><OPTION>M/C </OPTION><OPTION>Check </OPTION> </SELECT>
		  </TD>
		</TR>
		<TR>
		  <TH COLSPAN="4" ALIGN="left"> Special Instructions<BR>
		  <TEXTAREA NAME="Special" style="width:100%" ROWS="3" WRAP="soft">No Special Instructions</TEXTAREA>

		  </TH>
		</TR>
		<TR ALIGN="center">
		  <TD COLSPAN="2" WIDTH="50%" ALIGN="RIGHT" VALIGN="MIDDLE">
		  <INPUT TYPE="Image" SRC="Order1.gif" NAME="Order" Active>
		  </TD>
		  <TD COLSPAN="2" width="50%" VALIGN="middle" ALIGN="left"> &#160;<INPUT TYPE="reset" VALUE="Reset"></TD>
		</TR>
	 </TABLE>
	 </TD>
  </TR>
</TABLE>
<P>&nbsp; </P>
</FORM>
</div>
</BODY>
</HTML>

